<template>
  <el-container>
    <!--头部信息开始-->
    <el-header height="1">
      <el-form ref="queryForm" size="small" :model="parmsValue.query" label-width="160px" class="middle-form">
        <el-row>
          <el-col :span="8">
            <el-form-item prop="userid" label="用户ID">
              <el-input v-model="parmsValue.query.userid" :clearable="true" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="username" label="用户名">
              <el-input v-model="parmsValue.query.username" :clearable="true" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <!--头部信息结束-->

    <!--管理投组树开始-->
    <el-main>
      <el-tree
        ref="portTree"
        :check-strictly="checkStrictly"
        :data="data"
        :show-checkbox="true"
        node-key="id"
        :default-expand-all="true"
        :default-checked-keys="[5]"
        :props="defaultProps"
      />
      <div class="buttons" style="text-align: center">
        <el-button type="success" @click="save">保存</el-button>
      </div>
    </el-main>
    <!--管理投组树结束-->
  </el-container>
</template>

<script>
  import { formItems } from '@/utils/formItems'
  import * as kk from '@/utils/k-utils'
  import request from '@/utils/request'

  export default {
    data() {
      return {
        test: '',
        parmsValue: {
          query: {
            userid: '',
            username: ''
          }
        },
        // 树节点数据
        checkStrictly: false,
        data: [],
        defaultProps: {
          children: 'children',
          label: 'text'
        }
      }
    },
    watch: {
      '$route': function(newValue) {
        if (newValue.path === '/portfolio_setting_manager') {
          this.loadRouteQuery()
          this.loadTreeOption()
        }
      }
    },
    // 生命周期开始
    beforeMount() {
      this.loadRouteQuery()
      this.loadTreeOption()
    },
    // 生命周期结束
    methods: {
      /**
       * 加载路由数据
       */
      loadRouteQuery() {
        this.parmsValue.query.userid = this.$route.query.userid
        this.parmsValue.query.username = this.$route.query.username
      },
      /**
       * 加载数据树
       */
      loadTreeOption() {
        kk.k_load_url(formItems.PUBLIC, '/base/comn-query-tree.json', {
          exeid: 'M8212EQ004'
        }).then(resp => {
          this.data = resp
          this.loadTreeChecked()
        })
      },
      /**
       * 加载树选中的数据
       * 关于checkStrictly的设置作用：
       * element-ui的tree组件有如下特点：设置选中父节点，则子项目全部会选中，这样
       * 在回显数据时非常不协调。因此采用如下简易方法，即设置checkStrictly的值，该
       * 值控制父节点是否与子节点有关联。true则无关联，这时候就先回显数据。然后设置false，
       * 这时候操作tree又恢复了点击父节点可以全选中子节点的联动了
       */
      loadTreeChecked() {
        this.checkStrictly = true
        kk.k_load_exeid(formItems.PUBLIC, 'M8213EQ202', { userid: this.parmsValue.query.userid }).then(resp => {
          const checked = resp.rows.map(item => item.t8_sys_portfol_id)
          this.$refs.portTree.setCheckedKeys(checked, true)
          this.checkStrictly = false
        })
      },
      save() {
        const formData = new FormData()
        this.$refs.portTree.getCheckedKeys().forEach(key => formData.append('t8_sys_portfol_id', key))
        this.$refs.portTree.getHalfCheckedKeys().forEach(key => formData.append('t8_sys_portfol_id', key))
        formData.append('userid', this.parmsValue.query.userid)
        formData.append('exeid', 'M8213ES103')
        request.post(formItems.PUBLIC + '/base/comn-update.json', formData, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then(resp => {
          if (resp.success) {
            kk.k_close_self_page()
          }
        })
      }
    }
  }
</script>
